<template>
	<div>
		<div id="Item">
			<el-card class="box">
				<!-- 搜索筛选名称或标题 -->
				<div class="flex">
					<div class="user-name-label">用户名称</div>
					<div class="time_top">手机号</div>
				</div>
				<div class="block_center"></div>
				<div class="flexBox">
					<div>
						<el-input v-model.trim="inputed" @input="filters" placeholder="输入内容" class="search-input">
							<template #prefix>
								<el-icon class="el-input__icon">
									<search />
								</el-icon>
							</template>
						</el-input>
					</div>
					<div class="tel-input-container">
						<el-input v-model.trim="tel" @input="filters" placeholder="输入手机号" class="tel-input">
							<template #prefix>
								<el-icon class="el-input__icon">
									<search />
								</el-icon>
							</template>
						</el-input>
					</div>
				</div>
				<div class="block_center"></div>
				<div class="block_center"></div>
				<el-badge class="button-left">
					<el-button type="primary" @click="derive(0)" size="default" class="export-button">
						导出
					</el-button>
				</el-badge>
				<div class="block_center"></div>
				<!-- table表格数据展示 -->
				<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
					class="data-table" :cell-style="{ 'text-align': 'center' }" ref="multipleTableRef" height="auto"
					v-el-table-infinite-scroll="handleTableScroll" :header-cell-style="{ 'text-align': 'center' }"
					stripe @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" />
					<el-table-column prop="id" label="用户id" width="170" fixed />
					<el-table-column prop="shop_title" label="会员名称" show-overflow-tooltip fixed>
					</el-table-column>
					<el-table-column prop="nickname" label="账户昵称" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="createtime" label="创建时间" fixed="right" show-overflow-tooltip width="190">
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<div class="paging">
					<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
						:page-sizes="[5, 10, 15, 20]" :small="small" :disabled="disabled" background
						layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" />
				</div>
			</el-card>
		</div>
	</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Search, Upload, RefreshRight, ArrowDown } from '@element-plus/icons-vue'
// 导出需要引入的
import * as XLSX from 'xlsx';
import table2excel from 'js-table2excel'
import { Order } from '../../../api/DealCenter/Order'
import { Scenic_order, lack_order } from '../../../api/scien_order/index'
import { ElMessage, useId } from 'element-plus';
import { inject } from 'vue'
// 全局前缀
import '../../../style/all.css'
const testFn = inject('testFn')
testFn()
const testName = inject('testName')
// 登录存储起来的个人账户信息，为了拿token值
const tokens = JSON.parse(localStorage.getItem('tokens'));
console.log(tokens);

let g = ''
// 获取到当前时间
function getCurrentDateTimeString() {
	const now = new Date();
	// 获取当前的年份，并只取后两位
	const year = now.getFullYear().toString().slice();
	// 获取当前的月份，并确保是两位数（从0开始）
	const month = (now.getMonth() + 1).toString().padStart(2, '0');
	// 获取当前的日期，并确保是两位数
	const day = now.getDate().toString().padStart(2, '0');
	// 获取当前的小时，并确保是两位数
	const hours = now.getHours().toString().padStart('0');
	// 获取当前的分钟，并确保是两位数
	const minutes = now.getMinutes().toString().padStart(2, '0');
	// 获取当前的秒，并确保是两位数
	const seconds = now.getSeconds().toString().padStart(2, '0');
	// 拼接成所需的字符串格式
	const dateTimeString = `${year}-${month}-${day} ${hours}-${minutes}-${seconds}`;
	g = `${year}-${month}-${day}`
	return dateTimeString;
}
//导出点击事件
const derive = (i) => {
	console.log(i);
	const Value_Data = ref([])
	// if(Value_Data.value!=''){
	if (i == 0) {
		// if(Value_Data.value!=''){
		if (tableData.value != "") {
			Value_Data.value = Data.value
			console.log(Data.value);
			ElMessage({
				message: '导出成功',
				type: 'success',
			})
			data()
			// const worksheet = XLSX.utils.json_to_sheet(Value_Data.value);
			// const workbook = XLSX.utils.book_new();
			// XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
			// // 生成Excel文件并下载
			// XLSX.writeFile(workbook, `订单.xlsx`);

			const column = [
				//数据表单
				{
					title: "序号", //表头名称title
					key: "id", //数据
					type: "text", //类型
				},
				{
					title: "店铺名称",
					key: "shop_title",
					type: "text",
				},
				{
					title: "用户名称",
					key: "nickname",
					type: "text",
				},
				{
					title: "订单号",
					key: "code",
					type: "text",
					width: 130,
					height: 80,
				},

				{
					title: "总价格",
					key: "handle_money",
					type: "text",
					width: 130,
					height: 80,
				},
				{
					title: "总数量",
					key: 'num',
					type: "text",
					width: 130,
					height: 80,
				}
				,
				{
					title: "状态",
					key: "status",
					type: "text",
					width: 130,
					height: 80,
				},
				{
					title: "购买时间",
					key: "createtime",
					type: "text",
					width: 130,
					height: 80,
				},

			];
			//将数据转化为字符串(list_data数据是接口数据，把名称换成自己的数据即可)
			getCurrentDateTimeString()
			let tableDatas = JSON.parse(JSON.stringify(Value_Data.value));
			let datas = tableDatas;
			table2excel(column, datas, "订单导出" + g); //表单数据名称
		} else {
			ElMessage({
				message: '暂无订单可以导出',
				type: 'warning',
			})
		}

	} else if (i == 1) {

	} else {
		console.log(SelectArr.value);
		if (SelectArr.value.length > 0) {
			Value_Data.value = SelectArr.value
			ElMessage({
				message: '导出成功',
				type: 'success',
			})
			data()


			const column = [
				//数据表单
				{
					title: "序号", //表头名称title
					key: "id", //数据
					type: "text", //类型
				},
				{
					title: "用户姓名",
					key: "name",
					type: "text",
				},
				{
					title: "用户昵称",
					key: "nickname",
					type: "text",
				},
				{
					title: "用户头像",
					key: "imgs",
					type: 'image',
					width: 80,
					height: 80,
				},
				{
					title: "手机号",
					key: "tel",
					type: "text",
					width: 130,
					height: 80,
				},

				{
					title: "商品名称",
					key: "ticketName",
					type: "text",
					width: 130,
					height: 80,
				},
				{
					title: "商品状态",
					key: 'sheng',
					type: "text",
					width: 130,
					height: 80,
				}
				,
				{
					title: "支付状态",
					key: "shen",
					type: "text",
					width: 130,
					height: 80,
				},
				{
					title: "订单号",
					key: "orderNum",
					type: "text",
					width: 130,
					height: 80,
				},
				{
					title: "支付金额",
					key: "money",
					type: "text",
					width: 130,
					height: 80,
				},
				{
					title: "商品价格",
					key: "ticketPrice",
					type: "text",
					width: 130,
					height: 80,
				},
				{
					title: "支付日期",
					key: "pay_time",
					type: "text",
					width: 130,
					height: 80,
				},
				{
					title: "过期日期",
					key: "over_time",
					type: "text",
					width: 130,
					height: 80,
				},
				{
					title: "下单日期",
					key: "create_time",
					type: "text",
					width: 130,
					height: 80,
				},
			];
			//将数据转化为字符串(list_data数据是接口数据，把名称换成自己的数据即可)

			getCurrentDateTimeString()
			let tableDatas = JSON.parse(JSON.stringify(Value_Data.value));
			let datas = tableDatas;
			table2excel(column, datas, "订单导出" + g); //表单数据名称
		} else {
			ElMessage({
				message: '请选择你要导出的数据',
				type: 'warning',
			})
			return
		}
	}
}

// 当前时间
let date = new Date();
// 获取当前时间
let date_time = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
console.log(Date.parse(new Date(date_time)));
// 数据
const Data = ref([])

// 未支付角标
const status_e = ref('0')
// 已支付角标
const status_z = ref('0')
// 已取消
const status_q = ref('0')
// 已核销
const status_hx = ref('0')
// 表格数据
const tableData = ref([])
onMounted(() => {
	data()
})
// 请求数据渲染
const arr_sta = ref([])
const indexoff = ref([])
const data = () => {
	lack_order({
		token: tokens.token,
		uid: tokens.userinfo.id
	}, {
		userid: tokens.userinfo.id,
		uid: tokens.userinfo.id
	}).then(res => {
		console.log(res);
		if (res.code == 1) {
			arr_sta.value = res.data
			indexoff.value = res.data
			let arr = []
			let set = []
			let cancen = []
			let array_q = []

			Data.value = res.data;
			tableData.value = res.data;
			OrderAll.value = tableData.value.length
			searh()
		} else {
			OrderAll.value = 0
		}
	})

}
const inputed = ref('')
const tel = ref('')
// 分类名称搜索
function filters() {
	let a = [];
	tableData.value = Data.value.filter(item => {
		// 判断是否满足搜索条件
		if (String(item.shop_title).indexOf(String(inputed.value)) > -1 &&
			String(item.tel).indexOf(String(tel.value)) > -1
		) {
			return tableData.value;
		}
	});
	currentPage.value = 1
}
// 全选单选
const multipleTableRef = ref()
const SelectArr = ref([])
const handleSelectionChange = (val) => {
	SelectArr.value = val
	console.log(SelectArr.value);
}

// 页面条数
const pageSize = ref(5);
// 第几页
const currentPage = ref(1);
// 对用户名搜索
const search_name = ref('')
// 对手机号搜索
const search_tel = ref('')
// 对时间进行搜索
const time = ref('')
// 搜索后数据
const search_data = ref()
// 全部的徽章数量
const OrderAll = ref('0')
const usable = ref(0)
const nousable = ref(0)
// 搜索的事件
const searh = () => {
	currentPage.value = 1
	usable.value = 0
	nousable.value = 0
	let end_time
	let start_time
	let ars = []
	if (time.value) {
		end_time = Date.parse(new Date(time.value[0]))
		start_time = Date.parse(new Date(time.value[1]))
	}
	tableData.value = Data.value.filter((item) => {
		if (item.name ?
			item.name.indexOf(search_name.value) > -1 &&
			item.tel.indexOf(search_tel.value) > -1 &&
			(time.value ?
				Date.parse(new Date(`${item.create_year}-${item.create_month}-${item.create_date} ${item.create_time}`)) > end_time &&
				Date.parse(new Date(`${item.create_year}-${item.create_month}-${item.create_date} ${item.create_time}`)) < start_time : true
			) : true
		) {
			return item
		}
		ars.push(item)
		// console.log(item);
	});

	let arrs = []
	let sets = []
	let cancens = []
	let arrsr = []
	// 赋值为了下面选项卡筛选准备上次结果
	search_data.value = tableData.value
	for (let k = 0; k < tableData.value.length; k++) {
		// console.log(tableData.value[k]);
		// 写三次判断
		// 未支付角标
		if (tableData.value[k].status == 1) {
			arrs.push(tableData.value[k])
			console.log(arrs);
			status_e.value = arrs.length
		} else if (tableData.value[k].status !== 1 || tableData.value[k].status !== 3) {
			status_e.value = arrs.length
		}
		if (tableData.value[k].status == 2) {
			sets.push(tableData.value[k])
			status_z.value = sets.length
		} else if (tableData.value[k].status !== 2) {
			status_z.value = sets.length

		}
		// 取消角标
		if (tableData.value[k].status == 4) {
			cancens.push(tableData.value[k])
			status_q.value = cancens.length

		} else if (tableData.value[k].status !== 4) {
			status_q.value = cancens.length
		}
		if (tableData.value[k].status == 3) {
			arrsr.push(tableData.value[k])
			console.log(tableData.value[k]);

			status_hx.value = arrsr.length
		} else if (tableData.value[k].status !== 3) {
			status_hx.value = arrsr.length
		}
		if (Date.parse(new Date(date_time)) < Date.parse(new Date(tableData.value[k].over_time))) {
			usable.value++
		} else {
			nousable.value++
		}
	}
	OrderAll.value = tableData.value.length
	tableData.value = tableData.value
	if (tableData.value == "") {
		status_z.value = '0'
		status_e.value = '0'
		status_q.value = '0'
		status_hx.value = '0'
	}
}
const filtstt = (i) => {
	console.log(i);
	// searh()
	let art = [];
	tableData.value = search_data.value.filter((item) => {
		// 判断是否满足搜索条件
		if (
			String(item.status).indexOf(String(i)) > -1
		) {
			return tableData
		}
	});

	console.log(tableData.value);

}
</script>
<style scoped>

.paging {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.input {
	width: 220px;
	height: 36px;
	margin-right: 10px;
}

.button {
	width: 60px;
	height: 35px;
}

.search {
	width: 65%;
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.flexBox {
	display: flex;
	width: 100%;
	align-items: center;
}

.option {
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.badge {
	margin-right: 10px;
}

/* 新增样式类 */
.user-name-label {
	width: 220px;
}

.search-input {
	width: 220px;
}

.tel-input-container {
	margin-left: 20px;
}

.tel-input {
	width: 220px;
}

.button-left {
	margin-right: 10px;
}

.export-button {
	height: 35px;
}

.data-table {
	width: 100%;
}
</style>